<template>
    <div class="buystep">
        <dl>
            <dd>
                <img :src="icon" alt="">
                <aside>
                    <strong>{{name}}</strong>
                    <em><b>{{price}}</b>彩豆</em>
                </aside>
            </dd>
            <dd>
                <label for="">
                    <span>收件人</span>
                    <input v-model="uname" type="text">
                </label>
            </dd>
            <dd>
                <label for="">
                    <span>联系电话</span>
                    <input v-model="contact" type="text" maxlength="11">
                </label>
            </dd>
            <dd>
                <label for="">
                    <span>收件地址</span>
                    <textarea v-model="address"/>
                </label>
            </dd>
        </dl>
        <a href="javascript:;" @click="submitbuy" class="buysbumit">立即兑换</a>
    </div>
</template>

<script>
    import Button from '../../components/Button.vue';
    import DomLoad from '../../components/DomLoad';
    import {getproInfoById, buyProductionByIdR, getBankCards} from '../../service/shop';
    import {isEmpty} from 'ramda';
    import {isphone} from '../../uitls/common';
    import {getMytoken, getLogintoken} from '../../service/common';

    export default {
        components: {
            myButton: Button,
            DomLoad,
        },
        data() {
            return {
                uname: '',
                contact: '',
                address: '',
                icon: "",
                id: "",
                name: "",
                price: "",
                stock: "",

            };
        },
        created() {
            const proid = this.$route.params.id;
            this.id = proid;
            this.getdata(proid);
        },
        computed: {},
        methods: {
            /**
             * 获取一些初始化信息
             */
            goExchangerecords(){
                this.$router.push('/shop/exchangerecords')
            },
            async getdata(id){
                const {data}=await getproInfoById(id);
                if(data && data.code === 0) {
                    this.icon = data.data.icon;
                    this.id = data.data.id;
                    this.name = data.data.name;
                    this.price = data.data.price;
                    this.stock = data.data.stock;
                }
                else {
                    this.$vux.toast.text(data.msg);
                }
            },
            async beforeCheckBlanCard(params){
                const {data}=await getBankCards(params);
                if(data && data.code === 0) {
                    return data.data.length > 0;
                }
                else return false;
            },
            async submitbuy(){
                const {token}= await getMytoken(true);
                if(!token) {
                    getLogintoken(function (value) {
                        console.log('vvv', value);
                        if(value) {
                            location.reload();
                        }
                    }).then(({token})=> {
                    });
                    return;
                }
                if(!(await this.beforeCheckBlanCard({UserIDGuid: token}))) {
                    this.$vux.toast.text('请先绑定银行卡');
                    return;
                }
                const {uname, contact, address, id}=this;
                if(isEmpty(uname)) {
                    this.$vux.toast.text('请输入姓名');
                    return;
                }
                if(!isphone(contact)) {
                    this.$vux.toast.text('请输入正确的手机号');
                    return;
                }
                if(isEmpty(address)) {
                    this.$vux.toast.text('请输入收货地址');
                    return;
                }
                const {data} =await buyProductionByIdR({id, uname, contact, address, token});
                if(data && data.code === 0) {
                    this.$vux.toast.text('兑换成功');
                    setTimeout(function () {
                        this.$router.push('/shop/exchangerecords')
                    }, 1000);

                }
                else {
                    this.$vux.toast.text(data.msg);
                }
            }
        }
    }
</script>
<style scoped lang="less" rel="stylesheet/less">
    @import "../app";

    .buystep {
        background: #fff;
        font-size: @fz30;
        height: 100%;
        dl {
            padding: 0 24px;
            dd {
                border-bottom: 1px solid @color12;
                display: flex;
                padding: 24px 0;
                align-items: center;
                img {
                    width: 120px;
                    height: 120px;
                    margin-right: 20px;
                }
                aside {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    strong {
                        font-weight: bolder;
                        word-wrap: break-word;
                        word-break: normal;
                    }
                    em {
                        b {
                            color: @color22;
                        }
                    }
                }
                label {
                    display: flex;
                    flex: 1;
                    span {
                        width: 220px;
                        display: flex;
                        align-items: center;
                    }
                    input {
                        flex: 1;
                        border: none;
                        font-size: @fz30;
                        color: @color2;
                    }
                    textarea {
                        flex: 1;
                        border: none;
                        font-size: @fz30;
                        color: @color2;
                    }
                }
            }
        }
        .buysbumit {
            width: 640px;
            height: 86px;
            border-radius: 8px;
            background: @color22;
            text-align: center;
            line-height: 86px;
            color: #fff;
            font-size: @fz36;
            display: block;
            margin: 0 auto;
            margin-top: 90px;
        }
    }
</style>